import React from 'react'
import Styled from 'styled-components'
import PropTypes from 'prop-types'
import { CommandBarButton } from 'components/commandBar'
import { connect } from 'react-redux'
import {
  Menu,
} from 'semantic-ui-react'
import { projectLabelView as projectDuck } from 'ducks'

const StyledMenu = Styled(Menu.Menu)`
  margin-right: 1em!important;
  margin-top: 15px!important;
`

class CommandBrushMenu extends React.Component {
  static propTypes = {
    activeBrushes: PropTypes.node.isRequired,
    selectBrush: PropTypes.func.isRequired,
    selectedBrush: PropTypes.string,
  }

  static defaultProps = {
    selectedBrush: undefined,
  }

  componentDidMount() {
    const { selectBrush, activeBrushes } = this.props
    if (activeBrushes.has('rectangle')) {
      selectBrush('rectangle')
    } else if (activeBrushes.has('polygon')) {
      selectBrush('polygon')
    }
  }

  render() {
    const { activeBrushes, selectBrush, selectedBrush } = this.props
    return (
      <StyledMenu position="right">
        {
          activeBrushes.has('rectangle')
          && <CommandBarButton key={1} icon="map" name="Rectangle" active={selectedBrush === 'rectangle'} action={() => selectBrush('rectangle')} />
        }
        {
          activeBrushes.has('polygon')
          && <CommandBarButton key={2} icon="map" name="Polygon" active={selectedBrush === 'polygon'} action={() => selectBrush('polygon')} />
        }
      </StyledMenu>
    )
  }
}

const mapStateToProps = state => ({
  activeBrushes: projectDuck.selectors.activeBrushes(state),
  selectedBrush: projectDuck.selectors.selectedBrush(state),
})

const mapDispatchToProps = {
  selectBrush: projectDuck.creators.actionSelectBrush,
}

export default connect(mapStateToProps, mapDispatchToProps)(CommandBrushMenu)
